// 要求:
// 仿照京东商品详情的放大镜效果

// 思考：
// 控制哪些元素 （小盒子,遮罩层，大盒子，大图片）
// 遮罩层和大盒子的显示和隐藏
// 如何移动遮罩层  (鼠标的位置)  x 和 y 
// 如何设置大图片的位置

// 编写代码：
// 1.0 获取页面相关的元素
var smallBox = document.querySelector(".small-box");
var mask = document.querySelector(".small-box .mask");
var bigBox = document.querySelector(".big-box");
var bigImage = document.querySelector(".big-box img");

// 2.0 编写函数（公共代码）
// 显示元素
// var show = function(dom){
//     dom.style["display"] = "block";
// }
// // 隐藏元素
// var hide = function(dom){
//     dom.style["display"] = "none";
// }
// // 测试通过
// // show(mask);
// // hide(mask);

// // 3.0 事件处理
// // 鼠标移入小盒子
// smallBox.onmouseenter = function(){
//     // 显示相关元素
//     show(mask);
//     show(bigBox);
// }
// // 鼠标离开小盒子
// smallBox.onmouseleave = function(){
//     // 隐藏相关元素
//     hide(mask);
//     hide(bigBox);
// }

// // 鼠标在小盒子移动
// smallBox.onmousemove = function(event){
//     // 获取鼠标在可视区的坐标位置
//     var x = event.clientX;
//     var y = event.clientY;
//     // 判断
//     // left = event.clientX - smallBox.offsetLeft
//     // top = event.clientY - smallBox.offsetTop
//     // 遮罩层位置 = 鼠标在页面可视区坐标 - 盒子在页面的坐标

//     // 计算遮罩层标签在小盒子的位置
//     x = x - smallBox.offsetLeft 
//     y = y - smallBox.offsetTop 
//     console.log("x=",x);
//     console.log("y=",y);

//     // 计算鼠标在遮罩层中心位置
//     // x = x - 150;
//     // y = y - 150;
//     x = x - mask.offsetWidth / 2;
//     y = y - mask.offsetHeight / 2;

//     // 向左移动
//     if(x < 0){
//         x = 0;
//     }
//     // 向上移动
//     if(y < 0){
//         y = 0;
//     }

//     // 计算遮罩层可移动的距离
//     var maskDistance = smallBox.offsetWidth - mask.offsetWidth;
//     // 计算大图片可移动的距离
//     var bigImageDistance = bigImage.offsetWidth - bigBox.offsetWidth;

//     // 向右移动
//     if(x > maskDistance){
//         x = maskDistance;
//     }

//     // 向下移动
//     if(y > maskDistance){
//         y = maskDistance;
//     }

//     // 设置遮罩层的位置
//     mask.style["left"] = x +"px";
//     mask.style["top"] = y +"px";

//     // 计算大图片的位置
//     var x2 = bigImageDistance * ( x / maskDistance);
//     var y2 = bigImageDistance * ( y / maskDistance);

//     // 设置大图片的位置
//     bigImage.style["left"] = -x2 + "px";
//     bigImage.style["top"] = -y2 + "px";

// }

smallBox.onmouseenter = function () {
    mask.style["display"] = "block";
    bigBox.style["display"] = "block";
}

smallBox.onmouseleave = function () {
    mask.style["display"] = "none";
    bigBox.style["display"] = "none";
}

smallBox.onmousemove = function (event) {
    var x = event.clientX;
    var y = event.clientY;

    x = x - smallBox.offsetLeft;
    y = y - smallBox.offsetTop;
    // console.log("x=" , x);
    // console.log("y=" , y);

    x = x - mask.offsetWidth/2;
    y = y - mask.offsetHeight/2;

    var maskDistance = smallBox.offsetWidth - mask.offsetWidth;
    var bigImageDistance = bigImage.offsetWidth - bigBox.offsetWidth;

    if(x<0) {
        x= 0;
    }
    if(y<0) {
        y = 0;
    }

    if(x > maskDistance) {
        x = maskDistance;
    }

    if(y > maskDistance) {
        y = maskDistance;
    }

    mask.style["left"] = x + "px";
    mask.style["top"] = y + "px";

    var x2 = bigImageDistance * (x / maskDistance);
    var y2 = bigImageDistance * (y / maskDistance);

    bigImage.style["left"] = -x2 + "px";
    bigImage.style["top"] = -y2 + "px";
}